<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .one,
        .two,
        .three,
        .four {
            border: 1px solid #333;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <button @click="comName='com-a'">a</button>
            <button @click="comName='com-b'">b</button>
            <button @click="comName='com-c'">c</button>
            <button @click="comName='com-d'">d</button>
        </div>
        <div class="part">
            <!-- <com-a v-if="comName == 'com-a'"></com-a>
            <com-b v-if="comName == 'com-b'"></com-b>
            <com-c v-if="comName == 'com-c'"></com-c>
            <com-d v-if="comName == 'com-d'"></com-d> -->

            <!-- <component is="com-a"></component>
            <component is="com-b"></component>
            <component is="com-c"></component>
            <component is="com-d"></component> -->

            <component :is="comName"></component>
        </div>
    </div>
</body>
<script type="module">
    // 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

    // 在大型应用中, 我们可能需要将应用分割成小一些的代码块(组件化),  => 在开发过程中使用单页面应用(把所有的页面都注册为组件实例,然后在根组件及其子组件中使用)  => 页面渲染时,可能会同时请求很多个组件,(有些访问频率比较高,有些访问频率比较低) => 对于这些访问频率比较低的组件可以设置为异步组件  => 特征:只有在这个组件需要被渲染的时候才会触发该工厂函数, 且会把结果缓存起来供未来重渲染


    var comA = {
        data() {
            return {
                count:1,
                timer:null,
            }
        },
        template: `<div class="one">
                <p>这是组件A:{{count}}</p>
        </div>`,
        mounted(){
            console.log("组件A挂载完毕");
            this.timer = setInterval(()=>{
                console.log(this.count);
                this.count ++;
            },1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    }

    var comB = {
        data() {
            return {
                count:1
            }
        },
        template: `<div class="two">
            <p>这是组件B:{{count}}</p>
            <p><button @click="count++">count++</button></p>
        </div>`,
        mounted(){
            console.log("组件B挂载完毕");
        }
    }

    // 异步组件 => 全局注册方式
    Vue.component("comC",function(resolve,reject){
        setTimeout(()=>{
            console.log("1s后被加载");
            resolve({
                data() {
                    return {

                    }
                },
                template: `<div class="three">
                    <p>这是组件C</p>
                </div>`,
                mounted(){
                    console.log("组件C挂载完毕");
                }
            })
        },1000);
    })

    // Vue.component("comD",function(resolve,reject){
    //     setTimeout(()=>{
    //         console.log("2s后被加载");
    //         resolve({
    //             data() {
    //                 return {

    //                 }
    //             },
    //             template: `<div class="three">
    //                 <p>这是组件D</p>
    //             </div>`,
    //             mounted(){
    //                 console.log("组件D挂载完毕");
    //             }
    //         })
    //     },2000)
    // })



    // var comC = {
    //     data() {
    //         return {

    //         }
    //     },
    //     template: `<div class="three">
    //         <p>这是组件C</p>
    //     </div>`,

    // }

    // var comD = {
    //     data() {
    //         return {

    //         }
    //     },
    //     template: `<div class="four">
    //             <p>这是组件d</p>
    //         </div>`,
    //     mounted() {
    //     },
    // }

    // ES2020提案 引入import()函数，支持动态加载模块。  => commonjs中的require()
    // console.log(import("../components/comD.js"));
    // import("../components/comD.js").then().catch()

    // 根实例/组件/应用
    var vm = new Vue({
        el: "#app",
        data: {
           comName:"com-a", // 默认显示组件A
        },
        components: { // 在当前组件(根组件) 注册了两个子组件 (comA comB)
            // 键名 => 组件名
            // 键值 => 组件的配置对象 
            comA: comA,
            comB: comB,
            // comC: comC,
            // 异步组件 => 局部注册方式
            // comD: ()=>{
            //     console.log("组件D被加载");
            //     return import("../components/comD.js");
            // },

            comD: ()=>import("../components/comD.js"),
        }
    })



</script>

</html>